<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="background">
      <!-- <image
        src="/static/yunshi_invitation.jpg"
        mode=""
        class="background_img"
      ></image> -->
    </view>

    <canvas
      v-if="!hstate"
      id="canvas"
      canvas-id="canvas"
      class="canvas"
      :style="{
        width: (poster.width || 10) + 'px',
        height: (poster.height || 10) + 'px',
      }"
    ></canvas>

    <img :src="preservationUrl" mode="" class="canvasNew" v-if="hstate" />

    <view class="" style="display: flex" v-if="pagestage">
      <view
        style=""
        :class="!hstate ? 'button' : 'buttonnew'"
        @click="$u.debounce(copy, 1000, true)"
      >
        <text>复制邀请码</text>
      </view>

      <view
        style=""
        :class="!hstate ? 'buttons' : 'buttonnews'"
        @click="$u.debounce(handleSaveImage, 1000, true)"
      >
        <text>保存</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from "../../api/api";
import tip from "@/utils/tip.js";
import { getSharePoster } from "../../components/QS-SharePoster/QS-SharePoster.js";
var ctx;
var _this;
export default {
  data() {
    return {
      copyitem: "",
      copyitemimg: "",
      copyitemurl: "",
      poster: {},
      preservationUrl: "",
      hstate: false,
      pagestage: false,
    };
  },
  onLoad() {
    this.invitationCode();
  },
  methods: {
    copy() {
      uni.setClipboardData({
        // data: this.copyitemurl, //要被复制的内容
        data: this.copyitem, //要被复制的内容
      });
      uni.hideToast();
      this.$refs.uToast.show({
        title: "复制成功",
        type: "succes",
      });
    },

    async invitationCode() {
      let res = await api.invitationCode({});
      if (res.code == 0) {
        this.copyitem = res.data.invitation_code;
        this.copyitemurl = res.data.invitation_url;
        let htt = res.data.invitation_poster.split(":");
        if (htt[0] == "http") {
          res.data.invitation_poster =
            "https" + res.data.invitation_poster.substring(4);
        }
        this.base64(res.data.invitation_poster);
      }
    },

    async base64(url) {
      let res = await api.base64({
        query: {
          url: this.copyitemurl,
        },
        method: "post",
        loading: "加载中",
      });
      this.copyitemimg = res.data;

      ctx = uni.createCanvasContext("canvas", this);
      this.shareFc(url);
    },

    async shareFc(img_url) {
      let _this = this;
      try {
        const d = await getSharePoster({
          _this: _this, //若在组件中使用 必传
          canvasType: "2d",
          type: "testShareType",
          formData: {
            //访问接口获取背景图携带自定义数据
          },

          posterCanvasId: "canvas", //canvasId

          delayTimeScale: 20, //延时系数
          background: {
            height: 10,
            width: 10,
          },
          setCanvasWH({ bgObj }) {
            _this.poster = bgObj;
          },
          drawArray({ bgObj, type, bgScale, setBgObj, getBgObj }) {
            return [
              {
                type: "image",
                id: "productImage",
                url: img_url,
                dx: 0,
                dy: 0,
                serialNum: 0,
                infoCallBack(imageInfo) {
                  let width = 372;
                  let height = 683;
                  setBgObj({
                    width,
                    height,
                  });
                  return {
                    dWidth: width,
                    dHeight: height,
                    mode: "aspectFill",
                  };
                },
              },
              {
                type: "image",
                url: _this.copyitemimg,
                dx: 0,
                dy: 0,
                serialNum: 1,
                allInfoCallback({ drawArray }) {
                  const productImage = drawArray.find(
                    (item) => item.id === "productImage"
                  );
                  let width = 70;
                  let height = 70;
                  return {
                    dx: 294,
                    dy: 600,
                    correctLevel: 1,
                    dWidth: width,
                    dHeight: height,
                  };
                },
              },
              //   {
              //     type: "image",
              //     // text: _this.copyitemurl,
              //     url: _this.copyitemimg,
              //     serialNum: 2,
              //     allInfoCallback({ drawArray }) {
              //       const productImage = drawArray.find(
              //         (item) => item.id === "productImage"
              //       );
              //       // const addHeight = getBgObj().height - productImage.dHeight;
              //       // const widthSize = getBgObj().width * .4;

              //       const addHeight = 60;
              //       const widthSize = 60;

              //       const heightSize = addHeight;
              //       const countSize =
              //         widthSize > heightSize ? heightSize : widthSize;
              //       const size = countSize;
              //       return {
              //         size: size,
              //         dx: 296,
              //         dy: 592,
              //         correctLevel: 1,
              //       };
              //     },
              //   },
            ];
          },
        });

        // this.list.push(d.poster.tempFilePath);

        // if (this.imgList.length == this.list.length) {
        //   this.posterImage = this.list[0];
        // }

        this.pagestage = true;

        // #ifdef H5
        this.preservation();
        // #endif
      } catch (e) {
        console.log(e, "============");
      }
    },

    async preservation() {
      let res = await uni.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 600,
        height: 800,
        fileType: "jpg",
        canvasId: "canvas",
      });
      if (res[1].errMsg === "canvasToTempFilePath:ok") {
        this.preservationUrl = res[1].tempFilePath;
        this.hstate = true;
      } else {
        return;
      }
    },

    async handleSaveImage() {
      // #ifdef APP-PLUS
      let res = await uni.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 600,
        height: 800,
        fileType: "jpg",
        canvasId: "canvas",
      });
      let dataImage;

      if (res[1].errMsg === "canvasToTempFilePath:ok") {
        dataImage = res[1].tempFilePath;
      } else {
        return;
      }
      const saveRes = await uni.saveImageToPhotosAlbum({
        filePath: dataImage,
      });
      //   if (saveRes.errMsg === "saveImageToPhotosAlbum:ok") {
      //   }
      tip.defaults("保存成功");
      // #endif

      // #ifdef H5
      tip.defaults("请长按图片保存");
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  /* background-image: url("/static/yunshi_invitation.jpg");
  background-position: 0 100rpx; */

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;

  /* -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover; */

  width: 100%;
  /* height: 100vh; */

  min-height: 100vh;
  /* min-height: calc(100vh - 80rpx); */
  padding-bottom: 80rpx;
  background-color: $bg-color1;
  z-index: 1;
}

.background {
  position: relative;
  top: 20%;
}

.QRcode {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  z-index: 3;
  right: 10%;
  top: 50%;
}

.background_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
  height: 100%;
  width: 85%;
  /* margin-left: 50rpx; */
}

.item {
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.button {
  /* position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 30rpx; */
  margin: 100rpx 30rpx 30rpx;

  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  font-size: 28rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
  /* margin-left: 50%;transform: translate(-50%); */
  /* width: 160rpx; */
  /* height: 70rpx; */
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 20rpx;
  width: 45%;
}
.buttonnew {
  position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 30rpx;
  color: $text-color4;
  background: $gradient1;
  // background-repeat: no-repeat;
  // background-size: 100%;
  text-align: center;
  font-size: 28rpx;
  border-radius: 16rpx;
  /* margin-left: 50%;transform: translate(-50%); */
  /* width: 160rpx; */
  /* height: 70rpx; */
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 20rpx;
  z-index: 2;
  width: 45%;
}

.buttons {
  /* position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 30rpx; */
  margin: 100rpx 30rpx 30rpx;

  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  font-size: 28rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
  /* margin-left: 50%;transform: translate(-50%); */
  /* width: 160rpx; */
  /* height: 70rpx; */
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 20rpx;
  width: 45%;
}
.buttonnews {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  color: $text-color4;
  background: $gradient1;
  // background-repeat: no-repeat;
  // background-size: 100%;
  text-align: center;
  font-size: 28rpx;
  border-radius: 16rpx;
  /* margin-left: 50%;transform: translate(-50%); */
  /* width: 160rpx; */
  /* height: 70rpx; */
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 20rpx;
  z-index: 2;
  width: 45%;
}

.top {
  position: absolute;
  top: 116rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.canvas {
  margin-left: 50%;
  margin-bottom: 50rpx;
  transform: translateX(-50%);
}
.canvasNew {
  position: absolute;
  top: 0%;
  z-index: 2;
  width: 100%;
  max-height: 90%;
  height: 85%;
  /* margin-bottom: 100rpx; */
}
</style>
